<template>
  <el-dialog v-model="chooseDialogFormVisible" title="类别选择" width="500">
    <el-tree
      ref="treeRef"
      style="max-width: 600px"
      :node-key="id"
      default-expand-all
      :highlight-current="true"
      :expand-on-click-node="false"
      :current-node-key="currentNodeKey"
      :data="treeData"
      :props="defaultProps"
      @node-click="handleNodeClick"
      @node-collapse="handleNodeCollapse"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
        &nbsp;
        <el-button @click="addClick" >提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch, defineProps, defineEmits } from "vue";
import { ElMessage } from "element-plus";
import http from "../../../../util/http.js";
import { el } from "element-plus/es/locales.mjs";
// 定义
const optionCardShow = ref(false);
// 自定义属性
const props = defineProps({
  chooseFormVisible: Boolean,
});
// 自定义事件
const emit = defineEmits(["update:chooseFormVisible", "refreshTable", "update:selectedName", "update:currentNodeKey"]);

const chooseDialogFormVisible = ref(props.chooseFormVisible);
// 监听chooseFormVisible属性
watch(
  () => props.chooseFormVisible,
  (newVal) => {
    chooseDialogFormVisible.value = newVal;
  },
  { immediate: true } //在组件挂载时立即执行一次
);
// 监听chooseDialogFormVisible变化，关闭对话框
watch(chooseDialogFormVisible, (newVal) => {
  if (!newVal) {
    emit("update:chooseFormVisible", false);
  }
});
// 关闭对话框
const closeDialog = () => {
  chooseDialogFormVisible.value = false;
  emit("update:chooseFormVisible", false);
};
// 选中的 ID 数组
const selectedName = ref("");
const currentNodeKey = ref<string>("");
// 左键点击处理事件
const handleNodeClick = (data: TreeNode) => {
  // 如果节点有子节点，则不能选择
  if (data.children && data.children.length > 0) {
    ElMessage.warning("父节点不能被选择");
    return;
  }
  
  // 只允许选择一个节点
  selectedName.value = data.name;
  currentNodeKey.value = data.id;
  console.log(selectedName.value, currentNodeKey.value);
};


//树状菜单
const treeRef = ref(null);
const treeData = ref<TreeNode[]>([]);
const defaultProps = {
  children: "children",
  label: "name",
};
// 树节点属性接口
interface TreeNode {
  id: string;
  name: string;
  pid: string;
  createtime: Date;
  children?: TreeNode[];
}

// 菜单加载
const initTableData = async () => {
  try {
    const response = await http.post("/material/materialtable");
    const result = response.data.rows;
    treeData.value = convertToTree(result);
  } catch (error) {
    ElMessage.error("菜单加载错误" + error);
  }
};
// 将数据转换为树状
const convertToTree = (data: TreeNode[]): TreeNode[] => {
  const result: TreeNode[] = [];
  const map: { [key: string]: TreeNode } = {};

  data.forEach((item) => {
    map[item.id] = { ...item, children: [] };
  });

  data.forEach((item) => {
    if (item.pid === "0") {
      result.push(map[item.id]);
    } else {
      if (map[item.pid]) {
        map[item.pid].children.push(map[item.id]);
      }
    }
  });

  return result;
};
// 提交功能
const addClick = (data: TreeNode) => {
  emit("update:selectedName", selectedName.value);
  emit("update:currentNodeKey", currentNodeKey.value);
  chooseDialogFormVisible.value = false;
  emit("update:chooseFormVisible", false);
};

onMounted(() => {
  initTableData();
});
</script>
<style scoped>
:deep(.el-dropdown) {
  position: fixed;
  z-index: 9999;
}

.el-tree .el-tree-node__expand-icon {
  font-size: 16px;
  color: #409eff;
}

.el-tree .el-tree-node__expand-icon.is-leaf {
  display: none;
}

.el-tree .el-tree-node__expand-icon {
  cursor: pointer;
}

:deep .option-card-button {
  width: 100%;
  border-radius: 0;
}
:deep .el-button + .el-button {
  margin: 0;
}
</style>
